<template>
  <div class="l-echart-pictorialbar"
       :style="styleSizeName"
       @click="handleClick">
    <div :ref="id"
         :style="styleChartName"></div>
  </div>
</template>

<script>
import init from "../mixins/common";
export default {
    mixins:[init],
    data() {
        return {
            dataHandle: []
        }
    },
    methods: {
        updateChart () {
            const optionData = this.$deepClone(this.dataChart);
            this.dataHandle = optionData || []
            if(this.dataType === 2) {
                const data = []
                optionData.map(t => {
                    data.push({name: t[this.labelKey],value: t[this.valueKey]})
                })
                this.dataHandle = data
            }
            const symbol = this.$validatenull(this.option.symbol)
            ? ""
            : `image://${this.apiUrl}system/annexesfile/${this.option.symbol.replace('$BASE_URL','')}?token=${this.token}`;
            const color = this.option.color || "#fff";
            const fontSize = this.option.fontSize || 20;
            var maxData = 0;
            this.dataHandle.forEach(ele => {
            if (ele.value > maxData) maxData = ele.value;
            });
            const option = {
            tooltip: (() => {
                return Object.assign(
                (() => {
                    if (this.formatter) {
                    return {
                        formatter: name => {
                        return this.formatter(name, this.dataChart);
                        }
                    };
                    }
                    return {};
                })(),
                {   
                    borderWidth: '0',
                    backgroundColor: this.option.tipBackgroundColor || 'rgba(50,50,50,0.7)',
                    textStyle: {
                    fontSize: this.option.tipFontSize,
                    color: this.option.tipColor || "#fff"
                    }
                }
                );
            })(),
            xAxis: {
                show: this.$vaildData(this.option.xAxisShow, true),
                max: maxData,
                splitLine: { show: false },
                offset: 10,
                axisTick: { show: false },
                axisLine: { show: false },
                axisLabel: {
                margin: 10,
                textStyle: {
                    color: this.option.nameColor || "#333",
                    fontSize: this.option.xNameFontSize || 14
                }
                }
            },
            yAxis: {
                data: (() => {
                return this.dataHandle.map(ele => {
                    return ele.name;
                });
                })(),
                show: this.$vaildData(this.option.yAxisShow, true),
                inverse: true,
                axisTick: { show: false },
                axisLine: { show: false },
                axisLabel: {
                margin: 10,
                textStyle: {
                    color: this.option.nameColor || "#333",
                    fontSize: this.option.yNameFontSize || 14
                }
                }
            },
            grid: {
                top: "center",
                height: Number(this.option.split) * 10,
                left: this.option.gridX || 70,
                right: this.option.gridX2 || 100
            },
            series: [
                {
                type: "pictorialBar",
                symbol: symbol,
                symbolRepeat: "fixed",
                symbolMargin: "5%",
                symbolClip: true,
                symbolSize: this.option.symbolSize || 30,
                symbolBoundingData: maxData,
                data: (() => {
                    return this.dataHandle.map(ele => {
                    return ele.value;
                    });
                })()
                },
                {
                type: "pictorialBar",
                itemStyle: {
                    normal: {
                    opacity: 0.2
                    }
                },
                label: {
                    normal: {
                    show: true,
                    position: "right",
                    offset: [10, 0],
                    textStyle: {
                        color: color,
                        fontSize: fontSize
                    }
                    }
                },
                animationDuration: 0,
                symbol: symbol,
                symbolRepeat: "fixed",
                symbolMargin: "5%",
                symbolSize: 30,
                symbolBoundingData: maxData,
                data: (() => {
                    return this.dataHandle.map(ele => {
                    return ele.value;
                    });
                })()
                }
            ]
            };
            this.myChart.resize();
            this.myChart.setOption(option, true);
        },
        handleClick() {
            this.clickFormatter &&
            this.clickFormatter(
            {
                data: this.dataHandle,
            },
            this.getItemRefs()
            );
        },
    }
};
</script>

